<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <link rel="stylesheet" href="../css/railView.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>
    <!-- vue -->
    <script src="../js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-form-item {
            margin-bottom: 0;
            display: flex;
            align-items: center;
        }
        .el-form-item__content {
            margin-left: 0 !important;
        }
        .el-form-item__content > .el-switch {
            margin-right: 1em;  
        }
        .el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase {
            width: 20px;
            font-size: 12px;
            height: -webkit-fill-available;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .el-form-item__content {
            display: flex;
            align-items: center;
        }
        .el-input-number .el-input__inner {
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="buttom-container">
            <el-button type="info" @click="setLight1">灯光效果1</el-button>
            <el-button type="info" @click="setLight2">灯光效果2</el-button>
            <el-button type="info" @click="dialogVisible = true">自定义灯光</el-button>
            <el-button type="info" @click="handleClear">清除场景灯光</el-button>
        </div>
        <el-dialog
            title="灯光设置"
            :visible.sync="dialogVisible"
            width="45%"
        >
            <el-form 
                ref="form" 
                :model="form" 
                label-width="130px"
            >
                <el-form-item label="构件颜色：">
                    <input type="color"  v-model="form.solidsColor">
                </el-form-item>
                <el-form-item label="构件线颜色：">
                    <input type="color"  v-model="form.solidsLineColor">
                </el-form-item>
                <el-form-item label="环境光遮挡：">
                    <el-switch v-model="form.ambientOcclusionEnabled"></el-switch>
                    <input type="color"  v-model="form.ambientOcclusionOptions" :disabled="!form.ambientOcclusionEnabled">
                </el-form-item>
                <el-form-item label="光晕：">
                    <el-switch v-model="form.bloomEnabled"></el-switch>
                    <el-tooltip  effect="light" content="光晕阈值" placement="top-start">
                        <el-input-number 
                            v-model="form.bloomOptions.threshold" 
                            :min="0" 
                            :max="1" 
                            :step="0.1"
                            :disabled="!form.bloomEnabled"
                            size="mini"
                            label="光晕阈值"
                            style="width: 80px;"
                        >
                        </el-input-number>
                    </el-tooltip>
                    <el-tooltip  effect="light" content="光晕溢出阈值渐变宽度" placement="top-start">
                        <el-input-number 
                            v-model="form.bloomOptions.thresholdRampWidth" 
                            :min="0" 
                            :max="1" 
                            :step="0.1"
                            :disabled="!form.bloomEnabled"
                            size="mini"
                            label="光晕溢出阈值渐变宽度"
                            style="width: 80px;"
                        >
                        </el-input-number>
                    </el-tooltip>
                    <el-tooltip  effect="light" content="光晕溢出强度" placement="top-start">
                        <el-input-number 
                            v-model="form.bloomOptions.intensityScale" 
                            :min="0" 
                            :max="1"
                            :step="0.1"
                            :disabled="!form.bloomEnabled"
                            size="mini" 
                            label="光晕溢出强度"
                            style="width: 80px;"
                        >
                        </el-input-number>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="轮廓：">
                    <el-switch v-model="form.silhouetteEnabled"></el-switch>
                    <input type="color"  v-model="form.silhouetteColor" :disabled="!form.silhouetteEnabled">
                    <el-tooltip  effect="light" content="渲轮廓透明度" placement="top-start">
                        <el-input-number 
                            v-model="form.silhouetteOptions.opacity" 
                            :min="0" 
                            :max="1" 
                            :step="0.1"
                            :disabled="!form.silhouetteEnabled"
                            size="mini"
                            style="width: 80px;"
                        >
                        </el-input-number>
                    </el-tooltip>
                    <el-tooltip  effect="light" content="轮廓阈值" placement="top-start">
                        <el-input-number 
                            v-model="form.silhouetteOptions.threshold" 
                            :min="0" 
                            :max="1" 
                            :step="0.1"
                            :disabled="!form.silhouetteEnabled"
                            size="mini"
                            style="width: 80px;"
                        >
                        </el-input-number>
                    </el-tooltip>
                    <el-tooltip  effect="light" content="轮廓阈值渐变宽度" placement="top-start">
                        <el-input-number 
                            v-model="form.silhouetteOptions.thresholdRampWidth" 
                            :min="0" 
                            :max="1"
                            :step="0.1"
                            :disabled="!form.silhouetteEnabled"
                            size="mini" 
                            style="width: 80px;"
                        >
                        </el-input-number>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="金属度和粗糙度：">
                    <el-tooltip  effect="light" content="金属度" placement="top-start">
                        <el-input-number 
                            v-model="form.metallicRoughness.metalness" 
                            :min="0" 
                            :max="1" 
                            :step="0.1"
                            size="mini"
                            style="width: 80px;"
                        >
                        </el-input-number>
                    </el-tooltip>
                    <el-tooltip  effect="light" content="粗糙度" placement="top-start">
                        <el-input-number 
                            v-model="form.metallicRoughness.roughness" 
                            :min="0" 
                            :max="1" 
                            :step="0.1"
                            size="mini"
                            style="width: 80px;"
                        >
                        </el-input-number>
                    </el-tooltip>
                </el-form-item>
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="添加定向光源" name="addLight">
                        <el-form-item label="光源照明的空间：">
                            <el-radio-group v-model="form.lightSpace">
                                <el-radio label="camera">相机</el-radio>
                                <el-radio label="world">三维场景</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="光源位置：">
                            <el-input v-model.number="form.position.x" placeholder="X轴" size="mini" style="width: 60px;"></el-input>
                            <el-input v-model.number="form.position.y" placeholder="Y轴" size="mini" style="width: 60px;"></el-input>
                            <el-input v-model.number="form.position.z" placeholder="Z轴" size="mini" style="width: 60px;"></el-input>
                        </el-form-item>
                        <el-form-item label="光源颜色：">
                            <input type="color"  v-model="form.color">
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <div id="left" style="width: 100%; height: 100%; position: relative;"></div>
    </div> 
    <script id="viewerStartup">
        const vm = new Vue({
            el: '#app',
            data: {
                tk: null,
                dialogVisible: false,
                activeNames: ['addLight'],
                form: {
                    lightSpace: 'camera',
                    position: {x: 1000, y: 1000, z: 1000},
                    bloomOptions: {threshold:0.65, thresholdRampWidth:0.1, intensityScale: 1},
                    silhouetteOptions: {opacity:1, threshold: 0.05, thresholdRampWidth: 0.025},
                    metallicRoughness: {metalness: 0, roughness: 0},
                    color: '#e6e6e6'
                },
            },
            mounted () {
                this.initModel()
            },
            methods: {
                initModel () {
                    var proleft = new CarsView("left", "csr", theWorldBrowserId, this.callbackLeft, { modelServiceUrl: "http://183.56.197.146:11182" });
                    proleft.then(function (value) {
                        this.tk = value;
                    });
                },
                callbackLeft(nodeNames, nodeIds, position, center, normal) {
                    position1 = position;
                    console.log(nodeIds, position);
                },
                // 光照效果1
                setLight1() {
                    tk.setSolidsColor([-2], { r: 255, g: 255, b: 255 })
                    tk.hwv.getModel().setNodesLineColor([-2], new Communicator.Color(44, 67, 120));
                    tk.setAmbientOcclusionEnabled(true) // 开启环境光遮挡
                    tk.setAmbientOcclusionOptions(2, {r: 5, g: 39, b: 175}) // 环境光遮挡参数
                    // tk.setBloomEnabled(true) // 开启光晕
                    // tk.setBloomOptions(0, 0.2, 0.3) // 光晕参数
                    tk.setSilhouetteEnabled(true) // 开启轮廓
                    tk.setSilhouetteOptions({r: 5, g: 39, b: 175}, 0.5, 0.2, 0.2)
                    tk.addlight({
                            lightSpace: 'camera', 
                            position: {x: 1000, y: 1000, z: 1000}, 
                            color: {r: 5, g: 39, b: 175}
                        })
                        .then(lightkey => { // 添加定向光
                        console.log(lightkey)
                    })
                    tk.hwv.model.setMetallicRoughness([-2], 0, 0.1);
                },
                // 光照效果2
                setLight2() {
                    tk.setSolidsColor([-2], { r: 206, g: 194, b: 194 }) // 设置构件颜色
                    tk.setSolidsLineColor([-2], { r: 155, g: 138, b: 138 }); // 设置构件线颜色
                    // tk.setAmbientOcclusionEnabled(true) // 开启环境光遮挡
                    // tk.setAmbientOcclusionOptions(2, {r: 255, g: 255, b: 255}) // 环境光遮挡参数
                    // tk.setBloomEnabled(true) // 开启光晕
                    // tk.setBloomOptions(0, 1, 1) // 光晕参数
                    // //tk.setSilhouetteEnabled(true) // 开启轮廓
                    // tk.setSilhouetteOptions({r: 5, g: 39, b: 175}, 0.5, 0.2, 0.2)
                    // tk.addlight({lightSpace: 'camera', position: {x: -63.5, y: 0.12014376817541406, z: 10.900000023841859}, color: {r: 5, g: 39, b: 175}}).then(lightkey => { // 添加定向光
                    //   console.log(lightkey)
                    // })
                    
                
                    //tk.setMetallicRoughness([-2], 0, 0.1); // 设置金属度和粗糙度
                },
                handleClear () {
                    tk.clearLights() // 清除所有灯光
                },
                handleSubmit () {
                    console.log(this.form, 'this.form');
                    const { 
                        solidsColor, 
                        solidsLineColor, 
                        ambientOcclusionEnabled,
                        ambientOcclusionOptions,
                        bloomEnabled,
                        bloomOptions,
                        silhouetteEnabled,
                        silhouetteColor,
                        silhouetteOptions,
                        metallicRoughness,
                        lightSpace,
                        position,
                        color
                    } = this.form

                    if (solidsColor) tk.setSolidsColor([-2], this.changeColor(solidsColor)) // 设置构件颜色
                    if (solidsLineColor) tk.setSolidsLineColor([-2], this.changeColor(solidsLineColor)) // 设置构件线颜色
                    tk.setAmbientOcclusionEnabled(ambientOcclusionEnabled) // 开启环境光遮挡
                    if (ambientOcclusionEnabled === true && ambientOcclusionOptions) tk.setAmbientOcclusionOptions(2, this.changeColor(ambientOcclusionOptions)) // 环境光遮挡参数
                    tk.setBloomEnabled(bloomEnabled) // 开启光晕
                    if (bloomEnabled === true) tk.setBloomOptions(bloomOptions.threshold, bloomOptions.thresholdRampWidth, bloomOptions.intensityScale) // 光晕参数
                    tk.setSilhouetteEnabled(silhouetteEnabled) // 开启轮廓
                    if (silhouetteEnabled === true && silhouetteColor ) tk.setSilhouetteOptions(this.changeColor(silhouetteColor), silhouetteOptions.opacity, silhouetteOptions.threshold, silhouetteOptions.thresholdRampWidth) // 轮廓参数
                    tk.setMetallicRoughness([-2], metallicRoughness.metalness, metallicRoughness.roughness); // 设置金属度和粗糙度
                    // 添加定向光源
                    tk.addlight({
                            lightSpace: lightSpace, 
                            position: position, 
                            color: this.changeColor(color)
                        })
                        .then(lightkey => {
                        console.log(lightkey, '添加定向光')
                    })
                    this.dialogVisible = false
                },
                // HEX转RGB
                changeColor (hex) {
                    const red = Number('0x' + hex.substring(1, 3));
                    const green = Number('0x' + hex.substring(3, 5));
                    const blue = Number('0x' + hex.substring(5, 7));
                    return {r: red, g: green, b: blue}
                }
            },
            
        })
      </script>
</body>
</html>
